//webpack 配置文件
//不管放到什么地方，最终可以启动这个文件就可以
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
	entry: {
		main: "./src/main.js" //入口文件
	},
	mode: "development", //打包类型
	output: { //输出配置
		filename: "[name].js", //输出文件的名字
		path: path.resolve(__dirname, './dist'), //输出路径
		publicPath: "./" //代理路径，指向服务器缓存
	},
	devServer: { //服务器状态配置
		contentBase: "./dist", //静态文件指向
		overlay: true //把webpack报错显示到浏览器端
	},
	plugins: [
		// 请确保引入这个插件！
		new VueLoaderPlugin()
	],
	resolve:{//配置别名
		alias:{
			 vue$: "vue/dist/vue.esm.js"
		}
	},
	module: { //配置加载器的
		rules: [ //加载器分配
			{
				test: /\.vue$/,
				loader: 'vue-loader'
			},
			{
				test: /\.html$/,
				use: [
					//文件输出名字
					{
						loader: "file-loader",
						options: {
							name: "[name].html"
						}
					},
					//与入口文件进行分离
					{
						loader: "extract-loader"
					},
					//打包
					{
						loader: "html-loader"
					},
				]
			},
			{
				test: /\.css$/,
				use: [{
						loader: "style-loader"
					},
					{
						loader: "css-loader"
					}
				]
			},
			{
				test: /\.(jpg|png|svg|ttf|woff)$/,
				use: [{
					loader: "file-loader",
					options: {
						name: "[name]-[hash:10].[ext]"
					}
				}]
			}
		]
	}
}